{% import "sidebar/administrator_sidebar.html" as administrator_sidebar_macro %}
{% import "sidebar/agent_sidebar.html" as agent_sidebar_macro %}
{% import "sidebar/developer_sidebar.html" as developer_sidebar_macro %}
{% import "sidebar/market_sidebar.html" as market_sidebar_macro %}
{% import "sidebar/operation_sidebar.html" as operation_sidebar_macro %}
{% import "sidebar/product_sidebar.html" as product_sidebar_macro %}
{% import "sidebar/sem_sidebar.html" as sem_sidebar_macro %}
{% import "sidebar/guest_sidebar.html" as guest_sidebar_macro %}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{% block title %}万屏时代OPC{% endblock %}</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  {% block head %}
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/metisMenu/2.7.0/metisMenu.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='AdminLTE.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='_all-skins.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <link href="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  {% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <a href="{{ url_for('main_bp.index') }}" class="logo">
          <span class="logo-mini"><b><img src="{{ url_for('static', filename='favicon.ico') }}" alt=""></b></span>
          <span class="logo-lg"><b>万屏时代OPC</b></span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>

          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- User Account: style can be found in dropdown.less -->
                {% if current_user.is_authenticated %}
                  <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      <span class="hidden-xs">{{ current_user.username }}</span>
                    </a>
                    <ul class="dropdown-menu">
                      <li class="user-header">
                          <p>OPC后台管理系统</p>
                      </li>
                      <li class="user-footer">
                        <div class="pull-left">
                          <a class="btn btn-primary" href="{{ url_for('auth_bp.conf_set') }}">参数配置</a>
                        </div>
                        <div class="pull-left" style="margin-left: 20px">
                          <a class="btn btn-info" href="{{ url_for('auth_bp.change_password') }}">修改密码</a>
                        </div>
                        <div class="pull-right">
                          <a class="btn btn-warning" href="{{ url_for('auth_bp.logout') }}">注销</a>
                        </div>
                      </li>
                    </ul>
                  </li>
                {% endif %}
            </ul>
          </div>
        </nav>
      </header>

      <!-- 左侧菜单栏 -->
      {% if current_user.is_authenticated %}
        {% if current_user.is_administrator %}
          {{ administrator_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_agent %}
          {{ agent_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_sem %}
          {{ sem_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_market %}
          {{ market_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_operation %}
          {{ operation_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_developer %}
          {{ developer_sidebar_macro.gen_sidebar(current_user) }}
        {% elif current_user.is_product %}
          {{ product_sidebar_macro.gen_sidebar(current_user) }}
        {% endif %}
      {% else %}
        {{ guest_sidebar_macro.gen_sidebar() }}
      {% endif %}

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
          <!-- Main row -->
          <div class="row">
              {% block content %}
                  <div style="margin-left: 10px; margin-right: 10px;">
                    {% for message in get_flashed_messages() %}
                    <div class="alert alert-warning">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {{ message }}
                    </div>
                    {% endfor %}
                  </div>

                  {% block modal %}{% endblock %}
                  {% block page_content %}
                  <div style="margin-left: 15px; margin-right: 15px;">
                      <div class="box box-primary box-solid">
                          <div class="box-header">
                              {% block panel_heading %}
                              {% endblock %}
                          </div>
                          <div class="box-body" id="panel_body">
                              {% block panel_body %}
                              {% endblock %}
                          </div>
                      </div>
                  </div>
                  {% block extra_page_content %}{% endblock %}
                  {% endblock %}
            {% endblock %}
          </div>
          <!-- /.row (main row) -->

        </section>
        <!-- /.content -->
      </div>
    </div>
    <!-- ./wrapper -->


    {% block scripts %}
        <!--引入第三方JS控件-->
        <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="//cdn.bootcss.com/metisMenu/2.7.0/metisMenu.min.js"></script>
        <script src="{{url_for('static', filename='jquery-ui.min.js')}}"></script>
        <script src="{{url_for('static', filename='adminlte.min.js')}}"></script>
        <script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
        <script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
        <script src="//cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

        <!--表单错误提示-->
        <script>
            $(function () {
                $.fn.select2.defaults.set("width", "100%");
                $('select').select2();
                $('[data-toggle="tooltip"]').tooltip();

                $('input[type="date"]').datetimepicker({
                    language: 'zh-CN',
                    autoclose: true,//选中之后自动隐藏日期选择框
                    clearBtn: true,//清除按钮
                    todayBtn: true,//今日按钮
                    minView: "month",
                    format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
                });
                $('input[type="time"]').datetimepicker({
                    language: 'zh-CN',
                    autoclose: true,//选中之后自动隐藏日期选择框
                    maxView: 'hour',
                    format: "hh:ii"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
                });
                $('input[type="datetime"]').datetimepicker({
                    language: 'zh-CN',
                    autoclose: true,//选中之后自动隐藏日期选择框
                    clearBtn: true,//清除按钮
                    todayBtn: true,//今日按钮
                    format: "yyyy-mm-dd hh:ii:ss"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
                });
                // 录音播放速度加快
                $('audio').each(function(){$(this)[0].playbackRate = 1.5})

            })
        </script>

    {% endblock %}
</body>
</html>
